import React, { FC, useEffect } from 'react'
import Myhead from '../../../components/myhead'
import { Button, Space, Swiper, Toast,Tabs } from 'antd-mobile'
import './index.scss'
import {inject,observer} from 'mobx-react'
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'
const Main:FC<any>=({
  uinfo
})=> {
  const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
  // const imgSrc=['https://static.welan.com/mobile/2021-11-17/1aed609a73e18178f735413d5df9b62b.jpg','http://static.welan.com/mobile/2021-11-11/4d4893092c4b9846733cbd8724519dae.jpg','http://static.welan.com/mobile/2021-11-17/b332e144d8b980eca3dc740c67eb922d.jpg']
  // const imgSrc=['https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8f94a4fd60d455689b20a0d1cf325be~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:940:560.awebp?','https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03e3008290134b8e9c42305735b0df3d~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:940:560.awebp?','https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40ca5b08da7d45d7af1cd7db1d163ea6~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:940:560.awebp?']
  const imgSrc=['https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a86d13f5b374333a846f93adc788e8d~tplv-k3u1fbpfcp-watermark.image?','https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2286b80809d46c1b681fcb364ba74fb~tplv-k3u1fbpfcp-watermark.image?','https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77cb40bb9cf642cfa59ef60d4d84f500~tplv-k3u1fbpfcp-watermark.image?','https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/819fd63fda02420084ec809dcd4af975~tplv-k3u1fbpfcp-watermark.image?']

  const navigate =  useNavigate()
 const changeRoute=(key:any)=>{
  console.log(key);
  if(key=='/home/main/userList'){
   navigate('/home/main/userList')
  }else if(key=='/home/main/bookList'){
    navigate('/home/main/bookList')
  }else if(key=='/home/main/annoList'){
    navigate('/home/main/annoList')
  }
  
 }
 const location = useLocation()
 console.log(location.pathname);
 
  return (
    <div className='paddingtop' style={{paddingTop:"2.1rem",paddingBottom:"0.46rem"}}>
        <Myhead title='sunshine'></Myhead>
        <div style={{position:"fixed",top:"0.46rem",width:"100%",height:"1.2rem",zIndex:"10"}}>
        <Swiper
        style={{borderRadius:"0.1rem"}}
        autoplay={true}
        autoplayInterval={2000}
        loop={true}
        >
         {
           imgSrc.map((item,index)=>(
            <Swiper.Item key={index}>
            <div
            className='myswiper'
              // style={{ background: item }}
              onClick={() => {
                Toast.show('暂时没有哦~')
              }}
            >
              <img src={item} style={{width:'100%',height:'100%'}}/>
            </div>
          </Swiper.Item>
           ))
         }
        </Swiper>
        </div>
        <div className='tab'>
        <Tabs
        onChange={changeRoute}
        activeKey={location.pathname}
        >
          
          <Tabs.Tab title='微读书' key='/home/main/bookList'>   
          </Tabs.Tab>
          
            <Tabs.Tab title='通讯录' key='/home/main/userList'>
            </Tabs.Tab>

          <Tabs.Tab title='公告' key='/home/main/annoList'>
          </Tabs.Tab>
        </Tabs>
        </div>
        <div>
           <Outlet></Outlet>
        </div>
    </div>
  )
}
export default inject('uinfo')(observer(Main))
